import React,{ Component } from "react";
import { View,Text,StyleSheet,Image,TouchableOpacity } from "react-native";
export default class WorkComponents extends Component {
    constructor(props){
        super(props);
        this.state = {
            TableData:[
                {
                    title:"关于九月份支部活动会后任务交流",
                    time:"2018-11-12",
                },
                {
                    title:"关于九月份支部活动会后任务交流1",
                    time:"2018-11-13",
                },
                {
                    title:"关于九月份支部活动会后任务交流2",
                    time:"2018-11-14",
                },
            ],
            TableData1:[
                {
                    title:"关于九月份支部活动会后任务交流3",
                    time:"2018-11-15",
                },
                {
                    title:"关于九月份支部活动会后任务交流4",
                    time:"2018-11-16",
                },
                {
                    title:"关于九月份支部活动会后任务交流5",
                    time:"2018-11-17",
                },
            ],
        }
    }
    _ArticleList(){
        let Array = [];
        this.state.TableData.map((item,index)=>{
            let text = (
                <TouchableOpacity onPress={ ()=>{
                    this.props.navigation.push("Textdetails",{ id:"123" })
                } }>
                <View style={ styles.articleList }>
                    <View>
                        <Text>
                            { item.title }
                        </Text>
                        <Text style={{ color:"#b6b6b6" }}>
                            { item.time }
                        </Text>
                    </View>
                    <Image source={ require("./image/rightIcon.png") }  style={{ width:10,height:10 }} />
                </View>
                </TouchableOpacity>
            );
            Array.push(text);
        });
        return Array;
    }
    _ArticleList1(){
        let Array = [];
        this.state.TableData1.map((item,index)=>{
            let text = (
                <TouchableOpacity onPress={ ()=>{
                    this.props.navigation.push("Textdetails",{ id:"234" })
                } }>
                    <View style={ styles.articleList }>
                        <View>
                            <Text>
                                { item.title }
                            </Text>
                            <Text style={{ color:'#b6b6b6' }}>
                                { item.time }
                            </Text>
                        </View>
                        <Image source={ require("./image/rightIcon.png") }  style={{ width:10,height:10 }} />
                    </View>
                </TouchableOpacity>
            );
            Array.push(text);
        });
        return Array;
    }
    _topData(){
        return (
            <View>
                <View style={ styles.textView }>
                    <Text style={ styles.text }>建言献策</Text>
                </View>
                { this._ArticleList() }
                <Text style={ styles.bottomText } onPress={()=>{
                    this.props.navigation.push("ArticleList",{ title:"建言献策" })
                }}>查看更多</Text>
            </View>
        )
    }
    _BottomData(){
        return (
            <View style={{ marginTop: 10 }}>
                <View style={ styles.textView }>
                    <Text style={ styles.text }>我的诉求</Text>
                </View>
                { this._ArticleList1() }
                <TouchableOpacity onPress={ ()=>{

                } }>
                <Text style={ styles.bottomText } onPress={()=>{
                    this.props.navigation.push("ArticleList",{ title:"我的诉求" })
                }}>查看更多</Text>
                </TouchableOpacity>
            </View>
        )
    }
    render(){
        return (
           <View style={{ flex:1 }}>
               <View style={ styles.conatiner }>
                   { this._topData() }
               </View>
               <View style={ styles.conatiner }>
                   { this._BottomData() }
               </View>
           </View>
        )
    }
}

const styles = StyleSheet.create({
    conatiner:{
        flex:1,
        padding:15,
        backgroundColor:'white',
        marginTop:10,
    },
    text:{
        fontSize:17,
        marginBottom: 10,
        fontWeight: 'bold',
        borderLeftWidth:5,
        paddingLeft: 15,
        borderColor:'#d04542',
    },
    articleList:{
        flex:1,
        paddingTop: 20,
        paddingBottom:10,
        // borderTopWidth: 1,
        borderColor: "#ccc",
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        borderBottomWidth: 1,
    },
    textView:{
        paddingBottom: 5,
        borderBottomWidth: 1,
        borderBottomColor:'#ccc',
    },
    bottomText:{
        textAlign: 'center',
        lineHeight:60,
        height:50,
        color:'#959595',
    }
});